<template>
  <div class="page">
    <div class="content" ref="popWrapper">
      <ul>
        <li class="item-list" v-for="(item,index) in pops" :key="index">
          <div class="pop-image">
            <img :src="item.img" alt="" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll';

export default {
  name: 'sale',
  data() {
    return {
      pops: [
        { img: 'http://mp6.jmstatic.com//jmstore/image/000/005/5554_std/59c2368bd7988_2048_1024.jpg?1505902980&imageView2/2/w/640/q/90' },
        { img: 'http://mp6.jmstatic.com//jmstore/image/000/001/1109_std/59bf370a47485_2048_1024.jpg?1505808765&imageView2/2/w/640/q/90' },
        { img: 'http://mp6.jmstatic.com//jmstore/image/000/000/870_std/59c4b3d2547dc_2048_1024.jpg?1506072541&imageView2/2/w/640/q/90' },
        { img: 'http://mp6.jmstatic.com//jmstore/image/000/000/870_std/59c4b3d2547dc_2048_1024.jpg?1506072541&imageView2/2/w/640/q/90' },
        { img: 'http://mp6.jmstatic.com//jmstore/image/000/000/870_std/59c4b3d2547dc_2048_1024.jpg?1506072541&imageView2/2/w/640/q/90' },
      ],
    };
  },
  methods: {
    initScroll() {
      console.log('________---------');
      this.popScroll = new BScroll(this.$refs.popWrapper, {
        click: true,
        probeType: 3,
      });
    },
  },
  created() {
    this.$nextTick(() => {
      this.initScroll();
    });
  },
};
</script>

<style scoped>
  .page {
    overflow: hidden;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
  }
  .content {
    margin-top: -0.2rem;
    margin-bottom: 0.3rem;
    height: 20rem;
  }
  .content:last-child {
    padding-bottom: 3rem;
  }

  .item-list {
    background: #FFFFFF;
    height: 6rem;
  }
  .item-list:last-child {
    padding-bottom: 3rem;
  }
  .pop-image {
    width: 100%;
    position: relative;
  }

  img{
    width: 100%;
  }
  img[lazy=loading] {
    display: block;
    width: 100%;
    height: 6rem;
    background: #000;
    margin: auto;
  }

</style>
